<template>
	<view class="setwdith">
		<view class="titlelist">
			<view class="titlelist-item" v-for="item in titlelist" :key="item.id" :class="{active:item.id==select}" @tap="selected(item.id)">
					{{item.text}}
			</view>
		</view>
		<view class="inspect">
			<view class="inspect-item">
				全部
			</view>
			<view class="inspect-item">
				<picker :value="forvalue" :range="forlist" @change="forchange">
					<view style="">{{forvalue}} <image :src="imgurl" style="width: 28rpx;height: 28rpx;vertical-align:middle;" mode=""></image></view>
				</picker>
			</view>
			<view class="inspect-item">
				选择公司
			</view>
		</view>
		<swiper  :current="select-1" @change="changeswiper">
			<swiper-item>
				
					<view class="familytypelistitem" 
						@tap="tobuy"
					>
						<image src="../../static/image/img_baoxian3@2x.png" class="familytypelistitem-img"></image>
						<view class="familytypelistitem-msg">
							<view class="msg-title">
								承认意外险
							</view>
							<view class="msg-msg">
								涵盖各种意外责任 | 可拓展猝死责任
							</view>
							<view class="msg-price">
								180 &nbsp;<text style="font-size: 24rpx;color: #42454b;margin-left: 8rpx;">&nbsp;元起</text>
							</view>
						</view>
					</view>
				
				
				
				
				
			</swiper-item>
			<swiper-item>
				2
			</swiper-item>
			<swiper-item>
				3
			</swiper-item>
			<swiper-item>
				4
			</swiper-item>
			<swiper-item>
				5
			</swiper-item>
		</swiper>
		
		<view style="margin-top: 20rpx;text-align: center;color: #bcc3cd;font-size: 24rpx;">已加载全部</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:1,
				titlelist:[
					{
						id:1,
						text:"健康"
					},
					{
						id:2,
						text:"意外"
					},
					{
						id:3,
						text:"旅行"
					},
					{
						id:4,
						text:"财产"
					},
					{
						id:5,
						text:"抗疫"
					},
				],
				forlist:[
					"全部","为父母","为爱人","为孩子","为自己"
				],
				forvalue:"全部",
				imgurl:"../../static/image/icon_baoxianxiangqing_weixuanzhong.png"
			
			}
		},
		methods: {
			selected(id){
				this.select=id
			},
			changeswiper(e){
				console.log(e.detail.current)
				this.select = e.detail.current+1
			},
			forchange(e){
				console.log(e.detail)
				this.forvalue = this.forlist[e.detail.value]
				if(e.detail.value ==0 ){
					this.imgurl = "../../static/image/icon_baoxianxiangqing_weixuanzhong.png"
				}else{
					this.imgurl = "../../static/image/icon_baoxianxiangqing_xuanzhong.png"
				}
			},
			tobuy(){
				uni.navigateTo({
					url:'../buyinsurance/buyinsurance'
				})
			}
		}
	}
</script>

<style>
.setwdith{
	width: 590rpx;
	margin: 0 auto;
}
.titlelist{
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-bottom: 2rpx #e6e6e6 solid;
}
.titlelist-item{
	padding:16rpx 0;
	font-size: 32rpx;
	color: #2e3033;
}
.active{
	border-bottom: 2rpx #0342d4 solid;
}
.inspect{
	display: flex;
	justify-content: space-between;
	padding: 24rpx 36rpx;
}

.family {
		width: 670rpx;
		min-height: 10rpx;
		margin: 0 auto;
	}

	.familytitle {
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.familytitletext1 {
		color: #2a2d32;
		font-size: 36rpx;
		font-weight: 600;
	}

	.familytitletext2 {
		font-size: 24rpx;
		color: #cbcbcb;
		margin-top: 12rpx;
	}

	.familylist {
		width: 100%;
		padding: 36rpx;
	}

	.familytype {
		display: flex;
		justify-content: space-between;
	}

	.ftype-item {
		width: 134rpx;
		height: 50rpx;
		background-color: #e6e6e6;
		color: #676767;
		font-size: 24rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.familytypelistitem {
		margin: 20rpx 0;
		display: flex;
	}

	.familytypelistitem-img {
		width: 160rpx;
		height: 160rpx;
	}

	.familytypelistitem-msg {
		margin-left: 10rpx;
	}

	.msg-title {
		font-size: 32rpx;
		color: #2e3033;
		margin-bottom: 4rpx;
	}

	.msg-msg {
		font-size: 24rpx;
		color: #cbcbcb;
	}

	.msg-type {
		display: flex;
	}

	.msg-type-item {
		font-size: 24rpx;
		color: #2acb8c;
		background-color: #e7fbf2;
		width: 110rpx;
		height: 38rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.msg-type-item1 {
		margin-left: 16rpx;
		font-size: 24rpx;
		color: #2acb8c;
		background-color: #f0fcf7;
		width: 110rpx;
		height: 38rpx;
		line-height: 34rpx;
		text-align: center;
	}

	.msg-price {
		font-size: 48rpx;
		color: #F1862A;
	}
	.msg-price{
		margin-top: 20rpx;
	}
</style>
